<template>
    <div>
        <div class="container">
            <div class="bg" ref="bg" :style="{wdith:wWidth,height:wHeight}">
                <div class="bg-mask" :style="{wdith:wWidth,height:wHeight}" ref="bgMask"></div>
                <div class="main">
                    <div class="content">
                        <div class="logo">
                            <svg-icon iconClass="huoyuedu" iconSize="70px" iconColor= "white"></svg-icon>
                        </div>
                        <div class="inner-content">
                            <h1>CZONE.COM</h1>
                            <p>在我们的眼中没有太阳，一直都是夜晚，但却不暗淡，因为有能代替太阳的东西</p>
                        </div>
                        <div class="btn-wrapper">
                            <a href="#"><span class="introduct"  @click.prevent="handleIntroduct">简介</span></a>
                            <a href="/#/auth/login"><span class="login">登录</span></a>
                            <a href="#"><span class="register">注册</span></a>
                        </div>
                    </div>
                    <div class="footer" >
                        <p>©2019 PPSSR.TK</p>
                    </div>
                    
                </div>
                <div class="modal-introduct"  v-show="isShow" @click.prevent="handleIntroduct">
                    <p>简介</p>
                    <hr>
                    <p>{{introduct}}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    name: 'index',
    mounted(){
        this.wHeight = document.documentElement.clientHeight +'px'
        this.wWidth = document.documentElement.clientWidth +'px'
        console.log(this.wWidth)
        console.log(this.$store.state.user.isLogin)
    },
    created(){
        
    },
    methods:{
        //简介
        handleIntroduct(){
            this.isShow = !this.isShow
        }
        
    },
    data(){
        return {
            introduct:'「ホワイトアルバムの季節」が、また、やってきた。',
            wHeight:'',
            wWidth:'',
            form:{
                username:'',
                password:''
            },
            isShow:false
        }
    }
}
</script>
<style lang="stylus" scoped>
    .bg{
        background url('../../assets/images/bg.jpg')no-repeat
        background-size 100% 100%
    }
    .bg-mask{
        background rgba(0,0,0,1)
        animation  bgMask 3s
        animation-fill-mode forwards
    }
    @keyframes bgMask {
        form {
            opacity 1
        }
        to {
            opacity 0.2
        }
    }
    .main{
        position absolute
        left 50%
        top 70%
        margin-top 0px
        margin -320px
        width 640px
    }
    .content{

    }
    .logo{
        width 100px
        height 100px
        border 1px solid #ffffff
        border-radius 100%
        text-align center
        line-height 140px
        position absolute
        margin-left -50px
        top 0px
        left 50%
        animation logo 2s
        animation-fill-mode forwards 
    }
    @keyframes logo {
        from{
            top 0px
        }
        to{
            top -40px
        }
    }
    .inner-content{
        width 600px
        height 2px
        border-bottom 1px solid #fff
        border-top 1px solid #fff
        position absolute
        top 100px
        left 50%
        margin-left -300px
        overflow hidden
        animation innerContent 2s
        animation-fill-mode forwards
    }
    @keyframes innerContent {
        form{
            height 2px
            top 190px
        }
        to{
            height 200px
            top 120px
        }
    }
    .inner-content h1 {
        color #ffffff
        text-align center
        padding 10px
        line-height 70px
    }
    .inner-content p {
        color #ffffff
        text-align center
        line-height 30px
    }
    .btn-wrapper{
        height 50px
        width 412px
        position absolute
        border 1px solid #ffffff
        border-radius  3px
        left 50%
        top 470px
        margin-left -200px
        display flex
        align-items center
        justify-content center
        animation btn-item 2s
        animation-fill-mode forwards
    }
    @keyframes btn-item {
        from{
            top 470x
        }
        to{
            top 400px
        }
    }
    .btn-wrapper span{
        display inline-block
        width 138px
        text-align center
        color #fff
        cursor pointer
        padding 12px 0 12px 0
    }
    .btn-wrapper a:nth-child(2){
        display inline-block
        width 138px
        text-align center
        color #fff
        border-left 1px solid #fff
    }
    .btn-wrapper a:nth-child(3){
        display inline-block
        width 138px
        text-align center
        color #fff
        border-left 1px solid #fff
    }
    .footer{
        text-align center
        position absolute
        top 540px
        left 50%
        margin-left -50px
        color #fff
        font-size 12px
        animation footer 2s
        animation-fill-mode forwards
    }
    @keyframes footer {
        from{
            top 540px
        }
        to{
            top 500px
        }
    }
    //简介模态框
    .modal-introduct{
        width 480px 
        height 200px
        background rgba(27, 31, 34, 0.85)
        position absolute
        top 40% 
        left 50%
        margin-left -220px
        border-radius 4px
    }
    .modal-introduct p{
        padding 10px
        color #fff
    }
    .modal-introduct p:nth-child(1){
        font-size 22px
        color #fff
    }
</style>
